<template>
  <div class="app-container">
    <div class="liucheng">
      <div class="liucheng-cen">
        <!-- <div class="search">
          <el-input
            width="80%"
            placeholder="输入关键字进行过滤"
            v-model="filterText">
          </el-input>
          <el-button size="small" type="success" @click="addClassify">新增车间</el-button>
        </div> -->
        <el-tree
          :data="threeData"
          node-key="id"
          default-expand-all
          :filter-node-method="filterNode"
          ref="tree"
          v-loading="loading"
          :props="defaultProps"
          :expand-on-click-node="false">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span>
              <el-button type="text" size="mini" @click="() => look(data)">查看</el-button>
            </span>
          </span>
        </el-tree>
      </div>
    </div>
  </div>
</template>

<script>
let tempIndex = null,parentId = null; //0新增一级分类，1新增无限极分类，2修改分类;分类父级id
import { getAllzongjian } from '@/api/oneclassify'
export default {
  data(){
    return{
      filterText: '',  //筛选的条件
      threeData: [],   //分类数据
      tempData: {},    //修改得数据
      boxshow: false,
      visible: false,
      loading: true,
      defaultProps:{
        children: 'childsList',
        label: 'ajob'
      },
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  mounted(){
    this.getlist()
  },
  methods: {
    /**
     * 获取分类列表
     */
    getlist(){
      getAllzongjian({zlevel: '总监'}).then(res => {
        console.log(res)
        this.threeData = res.data
        this.loading = false
      })
    },
    /**
     * 筛选分类
     */
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    /**
     * 新增一级分类
     */
    addClassify(){
      this.tempData = {}
      tempIndex = 0
      this.boxshow = true
    },
    /**
     * 添加无限极分类
     */
    append(data){
      console.log(data)
      this.tempData = {}
      tempIndex = 1
      parentId = data.id
      this.boxshow = true
    },
    /**
     * 查看数据
     */
    look(data){
      // 跳转履职项
      // this.$router.push({
      //   name: 'Zongjian',
      //   params: {
      //     options: JSON.stringify(data)
      //   }
      // })
      // localStorage.setItem('problem',JSON.stringify(data))
      // 跳转问题项
      this.$router.push({
        name:"Zjgswenti",
      })
      localStorage.setItem('zjgswenti',JSON.stringify(data))
    },
    /**
     * 编辑数据
     */
    write(data){
      this.tempData = data
      tempIndex = 2
      this.boxshow = true
    },
    /**
     * 删除数据
     */
    remove(node,data){
      console.log('node,data',node,data)
      deleteAnquanMulu(data.id).then(res => {
        console.log(res)
        this.$message({
          message: '删除成功！',
          type: 'success'
        })
        this.getlist()
      })
    }
  }
}
</script>

<style scoped lang="scss">
/deep/.el-button--primary {
  color: #fff;
  background-color: #18a05e !important;
  border-color: #18a05e !important;
}
/deep/.el-button--primary:hover,
.el-button--primary:focus {
  background: #18a05e !important;
  border-color: #18a05e !important;
  color: #fff !important;
}
/deep/.el-button:hover,
.el-button:focus {
  color: #18a05e;
  background-color: transparent;
}
/deep/.el-button--primary {
  color: #fff;
  background-color: #18a05e;
  border-color: #18a05e;
}
/deep/.el-button--text {
  color: #00c666 !important;
}
.liucheng-cen{
  width: 60%;
  // margin: 0 auto;
}
.change {
  display: flex;
  flex-wrap: wrap;
  > p {
    width: 50%;
    font-size: 14px;
    display: flex;
    align-items: center;
    color: #333;
    /deep/.el-input__inner {
      width: inherit;
      background: none;
      height: 32px;
      // line-height: 32px;
      color: #333;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding: 0 25px;
    }
    /deep/.el-input__icon {
      line-height: 32px;
    }
    .userselect {
      // max-width: 250px;
      flex: 1;
    }

    > span {
      display: block;
      width: 120px;
      text-align: right;
      padding-right: 15px;
    }
    > input {
      width: inherit;
      flex: 1;
      height: 32px;
      border-radius: 3px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding-left: 10px;
      color: #333;
    }
  }
}
.search{
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  /deep/.el-input{
    width: 85%;
  }
}
.app-container{
  padding: 20px;
}
.liucheng{
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.1);
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>